<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    title="客户详情"
    width="80%"
  >
    <div class="customerDetail">
      <div class="detailBox">
        <div class="infoTit">
          基本信息 <el-icon><Edit /></el-icon>
        </div>
        <div class="itemBox">
          <div class="itemInfo">
            <label>客户手机号：</label>{{ customerInfo.phone }}
          </div>
          <div class="itemInfo">
            <label>客户昵称：</label>{{ customerInfo.name }}
          </div>
          <div class="itemInfo">
            <label>成为客户时间：</label>{{ customerInfo.time }}
          </div>
        </div>
        <div class="itemBox">
          <div class="itemInfo">
            <label>来源方式：</label>{{ customerInfo.source }}
          </div>
          <div class="itemInfo">
            <label>性别：</label>{{ customerInfo.sex }}
          </div>
          <div class="itemInfo">
            <label>生日：</label>{{ customerInfo.birthday ? customerInfo.birthday : '—' }}
          </div>
        </div>
        <div class="itemBox">
          <div class="itemInfo">
            <label>客户标签：</label>{{ customerInfo.labelName ? customerInfo.labelName : '—' }}
          </div>
          <div class="itemInfo">
            <label>备注：</label>{{ customerInfo.remark ? customerInfo.remark : '无' }}
          </div>
        </div>
        <div class="tradeInfoTit">交易信息</div>
        <div class="tradeInfo">
          <div class="tradeItem">
            <div class="tradeTit">累积消费金额（元）</div>
            <div class="tradeValue">
              {{ customerInfo.total ? customerInfo.total : '0' }}
            </div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">累计消费订单数</div>
            <div class="tradeValue">
              {{ customerInfo.frequency ? customerInfo.frequency : '0' }}
            </div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">最近下单时间</div>
            <div class="tradeValue">
              {{ customerInfo.lastTime ? customerInfo.lastTime : '—' }}
            </div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">累计退款金额</div>
            <div class="tradeValue">
              {{ customerInfo.refundMoney ? customerInfo.refundMoney : '0' }}
            </div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">累计退款订单数</div>
            <div class="tradeValue">
              {{ customerInfo.refunds ? customerInfo.refunds : '0' }}
            </div>
          </div>
        </div>
      </div>
      <!-- 详情弹窗 -->
      <el-dialog
        v-model="isDataVisible"
        title="修改客户基本信息"
        width="30%"
        top="50px"
        class="group-dialog"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :modal="false"
      >
        <div class="changeCustomer">
          <el-form ref="form" :model="basicInfo" label-width="100px">
            <el-form-item label="客户手机号">
              <span>{{ basicInfo.phone }}</span>
            </el-form-item>
            <el-form-item class="inputWide" label="客户昵称">
              <el-input
                v-model="basicInfo.name"
                placeholder="请输入内容"
                maxlength="10"
                onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
                show-word-limit
              />
            </el-form-item>
            <el-form-item class="inputWide" label="性别">
              <el-radio v-model="basicInfo.sex" label="男">男</el-radio>
              <el-radio v-model="basicInfo.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item class="inputWide" label="生日">
              <el-date-picker
                v-model="basicInfo.birthday"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item class="inputWide" label="标签">
              <el-select
                v-model="basicInfo.ids"
                multiple
                collapse-tags
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.labelId"
                  :label="item.labelName"
                  :value="item.labelId"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="inputWide" label="备注">
              <el-input
                v-model="basicInfo.remark"
                maxlength="200"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="saveChangeCustomer">保 存</el-button>
            <el-button @click="closeChange">取 消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { updateCustomer, getCustomerDetail, getLabelData } from '@/api/customer'
function InitUserInfo () {
  this.birthday = ''
  this.buyerUserId = ''
  this.ids = []
  this.name = ''
  this.phone = ''
  this.remark = ''
  this.sex = ''
}

const visible = ref(false)
const isDataVisible = ref(false)
const userId = ref(0)
const customerInfo = ref({}) // 客户详情
const basicInfo = ref(new InitUserInfo())
const tagList = ref([]) // 标签列表

function show (id) {
  visible.value = true
  console.log('open')
  if (id) {
    userId.value = id
    getCustomerInfo()
    getTagList()
  } else {
    customerInfo.value = {}
    basicInfo.value = new InitUserInfo()
  }
}
defineExpose({ show })
// 修改基本信息
const changeInfo = () => {
  isDataVisible.value = true
}
const getCustomerInfo = () => {
  getCustomerDetail({ buyerUserId: userId.value }).then((res) => {
    if (res.code === '') {
      customerInfo.value = res.data
      basicInfo.value.birthday = customerInfo.value.birthday
      basicInfo.value.buyerUserId = customerInfo.value.buyerUserId
      basicInfo.value.ids = customerInfo.value.ids
      basicInfo.value.name = customerInfo.value.name
      basicInfo.value.phone = customerInfo.value.phone
      basicInfo.value.remark = customerInfo.value.remark
      basicInfo.value.sex = customerInfo.value.sex
    } else {
      ElMessage({
        message: res.message,
        type: 'error',
      })
    }
  })
}
const getTagList = async () => {
  const res = await getLabelData()
  if (res.code === '') {
    tagList.value = res.data
  } else {
    ElMessage({
      message: res.message,
      type: 'error',
    })
  }
}
const saveChangeCustomer = () => {
  updateCustomer(basicInfo.value).then((res) => {
    if (res.code === '') {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      getCustomerInfo()
      isDataVisible.value = false
    } else {
      ElMessage({
        message: res.message,
        type: 'error',
      })
    }
  })
}
const closeChange = () => {
  isDataVisible.value = false
}
</script>

<style lang="scss" scoped>
.pending {
  margin: 20px;
}
.customerDetail {
  padding: 0px 0px 100px 0px;
  background: #ffffff;
  height: 100%;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
  }
  .detailBox {
    .infoTit {
      margin: 30px 0;
      font-size: 20px;
      color: #333333;
      height: 50px;
      line-height: 50px;
      i {
        cursor: pointer;
      }
    }
    .tradeInfoTit {
      margin: 50px 0 30px 0;
      font-size: 20px;
      color: #333333;
      height: 50px;
      line-height: 50px;
    }
    .itemBox {
      display: flex;
      margin-bottom: 30px;
      .itemInfo {
        width: 350px;
        display: flex;
        color: #666666;
        font-size: 16px;
        label {
          width: 120px;
          text-align: right;
          display: block;
          color: #333333;
        }
      }
    }
    .tradeInfo {
      display: flex;
      .tradeItem {
        width: 250px;
        text-align: center;
        .tradeTit {
          font-size: 16px;
          margin-bottom: 25px;
        }
        .tradeValue {
          font-size: 16px;
        }
      }
    }
  }
}
</style>

<style scoped>
/* .changeCustomer .inputWide /deep/ .el-form-item__content {
  width: 280px;
}
.changeCustomer .inputWide /deep/ .el-select {
  width: 280px;
} */
:deep(.customerDetail) .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
/* .changeCustomer /deep/ .el-date-editor--date {
  width: 280px;
} */
</style>
